<template>
  <div class="pageAll" ref="deptPage" :style="PageStyle">
    <Tabs type="card">
      <TabPane label="部门管理" name=""></TabPane>
    </Tabs>
    <div class="content">
      <Row>
        <Col span="2">
          <Button icon="md-add" @click="add" type="primary">新增</Button>
        </Col>
      </Row>
      <br/>
      <Row>
        <Col span="6">关键字：<Input v-model="searchParams.key" placeholder="请输入查询关键字" clearable style="width: 60%"/>
        </Col>
        <Col span="6">
          <Button type="primary" icon="ios-search" @click="getData()">搜索</Button>
        </Col>
      </Row>
      <div class="tableComponents">
        <TableHelper ref="tableHelper" :action="actions.getDepts" :params="searchParams"
                     :columns="deptColumns"></TableHelper>
      </div>
    </div>

    <Drawer width="720" :title="operationName" :closable="true" v-model="drawerValue">
      <Form ref="deptDataNow" :model="deptDataNow">
        <Row>
          <Col span="12">
            <FormItem label="部门名称:" prop="name">
              <Input v-model="deptDataNow.name" placeholder="请输入部门名称" clearable style="width: 60%"/>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="负责人:" prop="headerName">
              <Input v-model="deptDataNow.headerName" placeholder="请输入部门名称" clearable style="width: 60%"/>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="12">
            <FormItem label="联系人:" prop="contactsName">
              <Input v-model="deptDataNow.contactsName" placeholder="请输入联系人" clearable style="width: 60%"/>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="联系电话:" prop="telephone">
              <Input v-model="deptDataNow.telephone" placeholder="请输入联系电话" clearable style="width: 60%"/>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="12">
            <FormItem label="部门职能:" prop="functions">
              <Input v-model="deptDataNow.functions" placeholder="请输入部门职能" clearable style="width: 60%"/>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="地址:" prop="address">
              <Input v-model="deptDataNow.address" placeholder="请输入部门地址" clearable style="width: 60%"/>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="12">
            <FormItem label="备注:" prop="memo">
              <Input v-model="deptDataNow.memo" placeholder="请输入备注信息" clearable style="width: 60%"/>
            </FormItem>
          </Col>
        </Row>
      </Form>
      <Row>
        <Col span="2" offset="15">
          <Button icon="md-close" @click="drawerValue =false" type="warning">取消</Button>
        </Col>
        <Col span="2" offset="1">
          <Button icon="md-arrow-up" @click="subData()" type="success">提交</Button>
        </Col>
      </Row>
    </Drawer>
    
    
    <Drawer width="720" :title="checkName" :closable="true" v-model="drawerCheck">
      <Form ref="deptDataNow" :model="deptDataNow">
        <Row>
          <Col span="12">
            <FormItem label="部门名称:" prop="name">
              {{deptDataNow.name}}
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="负责人:" prop="headerName">
              {{deptDataNow.headerName}}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="12">
            <FormItem label="联系人:" prop="contactsName">
              {{deptDataNow.contactsName}}
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="联系电话:" prop="telephone">
              {{deptDataNow.telephone}}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="12">
            <FormItem label="部门职能:" prop="functions">
              {{deptDataNow.functions}}
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="地址:" prop="address">
              {{deptDataNow.address}}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="12">
            <FormItem label="备注:" prop="memo">
              {{deptDataNow.memo}}
            </FormItem>
          </Col>
        </Row>
      </Form>
      <Row>
        <Col span="2" offset="19">
          <Button @click="drawerCheck =false" type="success">确定</Button>
        </Col>
      </Row>
    </Drawer>

  </div>
</template>
<script>
  import TableHelper from "../../../components/table/TableHelper"
  import {requestPost} from "../../../utils/js/HttpUtil"
  import messageUtil from "../../../utils/js/MessageUtil"
  import token from "../../../utils/js/config/token"

  export default {
    components: {
      TableHelper
    },
    data() {
      return {
        operationName: "新增部门",
        checkName:"查看部门",
        deptDataNow: {
          deptId: 0,
          name: "",
          headerName: "",
          contactsName: "",
          telephone: "",
          functions: "",
          address: "",
          memo: "",
          version: 0,
          token:""
        },
        PageStyle: {
          height: ""
        },
        drawerValue: false,
        drawerCheck:false,
        searchParams: {
          key: ""
        },
        actions: {
          getDepts: "/system/dept/getDept",
          delDept: "/system/dept/delDept",
          getDeptById: "/system/dept/getDeptById",
          updateDept: "/system/dept/updateDept",
          addDept: "/system/dept/addDept",
          getToken:"/system/safe/getReSubmitToken"
        },
        deptColumns: [
          {
            title: '部门名称',
            render: (h, params) => {
              return h('span', params.row.name);
            }
          },
          {
            title: '负责人',
            render: (h, params) => {
              return h('span', params.row.headerName);
            }
          },
          {
            title: '联系人',
            render: (h, params) => {
              return h('span', params.row.contactsName);
            }
          },
          {
            title: '联系电话',
            render: (h, params) => {
              return h('span', params.row.telephone);
            }
          },
          {
            title: '部门职能',
            render: (h, params) => {
              return h('span', params.row.functions);
            }
          },
          {
            title: '地址',
            render: (h, params) => {
              return h('span', params.row.address);
            }
          },
          {
            title: '备注',
            render: (h, params) => {
              return h('span', params.row.memo);
            }
          },
          {
            title: '操作',
            fixed: 'right',
            width:'200em',
            render: (h, params) => {
              return [
                h('i-button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.getRowItem(params.row.deptId)
                      this.drawerCheck=true
                    }
                  }
                }, '查看'),
                h('i-button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      //查询单个数据并设置值
                      this.getRowItem(params.row.deptId)
                      this.operationName = "修改部门"
                      this.drawerValue = true
                    }
                  }
                }, '编辑'),
                h('i-button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      messageUtil.confirm('确认删除？', () => {
                        requestPost(this.actions.delDept, {deptId: params.row.deptId}, (data) => {
                          messageUtil.message.success(data.message)
                          this.getData()
                        })
                      })
                    }
                  }
                }, '删除')

              ]
            }

          }
        ]
      }
    },
    methods: {
      getHeight() {
        this.PageStyle.height = window.innerHeight - 3.75 * 12 + 'px';
      },
      //编辑、查看，查询单条信息
      getRowItem(value){
        requestPost(this.actions.getDeptById, {deptId: value}, (data) => {
          //刷新数据
          this.deptDataNow.deptId = data.data.deptId
          this.deptDataNow.name = data.data.name
          this.deptDataNow.headerName = data.data.headerName
          this.deptDataNow.contactsName = data.data.contactsName
          this.deptDataNow.telephone = data.data.telephone
          this.deptDataNow.functions = data.data.functions
          this.deptDataNow.address = data.data.address
          this.deptDataNow.memo = data.data.memo
          this.deptDataNow.version = data.data.version
        })
      },
      subData() {
        if(this.deptDataNow.name==""){
          messageUtil.message.error('部门名称不能为空')
        }else{
        if (this.deptDataNow.deptId == 0) {//代表新增
          this.deptDataNow.token=token.token
          requestPost(this.actions.addDept, this.deptDataNow, (data) => {
            messageUtil.message.success(data.message)
            //完成后还原状态
            this.drawerValue = false
            this.deptDataNow.deptId=0
            this.$refs['deptDataNow'].resetFields()
            this.getData()
          })
        } else {//代表修改
          requestPost(this.actions.updateDept, this.deptDataNow, (data) => {
            messageUtil.message.success(data.message)
            //完成后还原状态
            this.drawerValue = false
            this.deptDataNow.deptId=0
            this.$refs['deptDataNow'].resetFields()
            this.getData()
          })
        }
      }
      },
      add() {
        //还原状态
        this.deptDataNow.deptId=0
        this.$refs['deptDataNow'].resetFields()
        //重置标题
        this.operationName = "新增部门"
        //请求防止表单重复提交的接口
        this.getToken()
        this.drawerValue = true
      },
      getData() {
        this.$refs.tableHelper.getData()
      },
      getToken(){
         requestPost(this.actions.getToken,{}, (data) => {
            token.token=data.data
            this.deptDataNow.token=token.token
         })
      }
    },
    created() {
      //window.addEventListener('resize', this.getHeight);
      this.getHeight()

    },
    mounted() {
      window.addEventListener('resize', this.getHeight);
      this.getHeight()
    }
  }
</script>
<style scoped="scoped">
  .pageAll {
    overflow: auto;
  }

  .content {
    padding-left: 2%;
    padding-right: 2%;
  }
  
  .ivu-input {
      border: 1px solid #000;
      border-radius: 4px;
      /* height: 36px; */
      top: 1px;
      font-size:13px;
      height:100%;
  }

</style>
